<template>
  <div>
    <Alert banner closable type="warning" show-icon>
        <span style="color:#fa7c00;font-size:18px;">警告</span> 
        <template slot="desc">经数据融合分析平台报告，贵阳市消防接处警系统提供的部分警情数据出现时间错误问题，致使依赖于警情历史数据的相关分析有不准确的现象产生。我们将配合消防支队尽快督促贵阳市消防接处警系统的承建单位提供准确数据，对您使用的不便我们深感歉意</template>
    </Alert>
    <Row class="banner">
      <h1>查看警情记录</h1>
      <h2>依据接处警数据对灾情情况进行记录和分析</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="6">
        <Card>
          <p slot="title">
            <span>今日警情总览</span>
          </p>
          <div class="chart" id="chart-outlet-today"></div>
          <Divider />
          <span class="text">今日累计接警：{{outletCountToday}}次</span>
          <Spin v-if="loading.outletToday" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <p slot="title">
            <span>今日接警情况</span>
          </p>
          <div class="chart" id="chart-accept-today"></div>
          <Divider />
          <span class="text">今日接警量最高：{{acceptMaxToday}}</span>
          <Spin v-if="loading.acceptToday" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="12">
        <Card>
          <p slot="title">
            <span>近7天警情波动</span>
          </p>
          <div class="chart" id="chart-outlet-weekly"></div>
          <Divider />
          <span class="text">警情产生最高时间{{outletPeakDate}}</span>
          <Spin v-if="loading.outletWeekly" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="24">
        <Card>
          <p slot="title">
            <span>警情历史情况一览</span>
          </p>
          <ul class="toolbar" slot="extra">
            <li class="item">
              <span class="text">按类型筛选</span>
              <Select v-model="typeName">
                <Option v-for="(item,index) in typeList" :value="item" :key="'ot-'+index">{{item}}</Option>
              </Select>
            </li>
            <li class="item">
              <span class="text">按接警中队筛选</span>
              <Select v-model="teamName">
                <Option v-for="(item,index) in teamList" :value="item" :key="'tn-'+index">{{item}}</Option>
              </Select>
            </li>
            <li class="item">
              <Input
                v-model="districtName"
                placeholder="输入警情位置开始搜索"
                style="width:260px"
                :search="true"
                enter-button="立即搜索"
                size="default"
                @on-search="renderTable(0)"
              ></Input>
            </li>
          </ul>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page :total="pageCount" show-elevator @on-change="renderTable"></Page>
          <Spin v-if="loading.table" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      loading: {
        outletToday: false,
        acceptToday: false,
        outletWeekly: false,
        talbe: false
      },
      option: {
        outletToday: null,
        acceptToday: null,
        outletWeekly: null
      },
      outletCountToday: 0,
      acceptMaxToday: '',
      outletPeakDate: null,
      typeName: null,
      teamName: null,
      typeList: [],
      teamList: [],
      districtName: null,
      tableData: [],
      tableColumns: [{
        title:'序号',key:'index',align:'center',width:70
      },{
        title:'灾情位置',key:'outletPosition',align:'center'
      },{
        title:'灾情类型',key:'outletType',align:'center',width:120
      },{
        title:'接警时间',key:'outletTime',align:'center',width:240
      },{
        title:'出警中队',key:'outletTeam',align:'center',width:180
      }],
      pageCount: 0,
      startTime: this.dateShift(0) + " 00:00:00",
      endTime: this.dateShift(0) + " 23:59:59"
    };
  },
  methods: {
    renderChart_OutletToday() {
      this.loading.outletToday = true;
      this.option.outletToday = {
        tooltip: { show: true, trigger: "item", formatter: "{b}:{c}" },
        legend: {
          itemWidth: 12,
          itemHeight: 12,
          orient: "horizontal",
          top: "top",
          left: "center",
          data: [],
          textStyle: { fontSize: 12 }
        },
        color: this.COLORS,
        series: [
          {
            name: "今日警情总览",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}起"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      axios
        .get(this.URLHEAD_DVS + "YZT_ZQXYFX", { params: params })
        .then(res => {
          let json = res.data;
          this.option.outletToday.legend.data = [
            "火灾扑救",
            "抢险救援",
            "社会救助",
            "其他出动"
          ];
          let hzjy_list = 0,
            qxpj_list = 0,
            shjz_list = 0,
            qtcd_list = 0;
          json.Data.forEach((o, i) => {
            hzjy_list = hzjy_list + o.List.hzjy_list;
            qxpj_list = qxpj_list + o.List.qxpj_list;
            shjz_list = shjz_list + o.List.shjz_list;
            qtcd_list = qtcd_list + o.List.qtcd_list;
          });
          this.option.outletToday.series[0].data = [
            { name: "火灾扑救", value: hzjy_list },
            { name: "抢险救援", value: qxpj_list },
            { name: "社会救助", value: shjz_list },
            { name: "其他出动", value: qtcd_list }
          ];
          this.outletCountToday = hzjy_list + qxpj_list + shjz_list + qtcd_list;
          this.$Crender("chart-outlet-today", this.option.outletToday);
          this.loading.outletToday = false;
        });
    },
    renderChart_AcceptToday() {
      this.loading.acceptToday = true;
      this.option.acceptToday = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}:{c}"
        },
        legend: {
          show: false,
          itemWidth: 12,
          itemHeight: 12,
          orient: "horizontal",
          top: "top",
          left: "center",
          data: [],
          textStyle: { fontSize: 12 }
        },
        color: this.COLORS,
        series: [
          {
            name: "今日接警情况",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}起"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      axios
        .get(this.URLHEAD_DVS + "YZT_JCJSDFX", { params: params })
        .then(res => {
          let json = res.data;
          this.option.acceptToday.legend.data = json.Data.list.map(o => {
            return o.AreaName;
          });
          this.option.acceptToday.series[0].data = json.Data.list.map(o => {
            return { name: o.AreaName, value: o.JJCount };
          });
          json.Data.list.forEach((o, i) => {
            if (o.JJCount === json.Data.MaxCount) {
              this.acceptMaxToday = this.acceptMaxToday + o.AreaName + ";";
            }
          });
          this.$Crender("chart-accept-today", this.option.acceptToday);
          this.loading.acceptToday = false;
        });
    },
    renderChart_OutletWeekly() {
      this.loading.outletWeekly = true;
      this.option.outletWeekly = {
        grid: { top: 10, left: 10, right: 50, bottom: 10, containLabel: true },
        tooltip: { show: true, trigger: "shadow", formatter: "{b}:{c}" },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333302" } }
        },
        series: [
          {
            type: "line",
            data: [],
            lineStyle: {
              color: "#ff7c00",
              width: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 6,
              shadowBlur: 12,
              shadowColor: "#ff7c0050"
            },
            areaStyle: { show: true, color: "#ff7c0075" },
            label: { show: true, position: "top", fontSize: 12 }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(-7) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "YZT_XFJQTZ", { params: params })
        .then(res => {
          let json = res.data;
          this.option.outletWeekly.xAxis.data = json.Data.map(o => {
            return o.name;
          });
          this.option.outletWeekly.series[0].data = json.Data.map(o => {
            return { name: o.name, value: o.lc + o.sw + o.xw + o.ws };
          });
          let max = this.findMaxValue(this.option.outletWeekly.series[0].data,'value')
          let peakDate=null
          json.Data.forEach((o,i)=>{
            if(max === o.lc + o.sw + o.xw + o.ws){
              peakDate = o.name
            }
          })
          this.outletPeakDate = peakDate
          this.$Crender('chart-outlet-weekly',this.option.outletWeekly)
          this.loading.outletWeekly = false
        });
    },
    renderTable(index) {
      this.loading.table = true
      let params = {
        ZQLX:this.typeName,
        CJZD:this.teamName,
        ZQWZ:this.districtName,
        pageIndex:index,
        pageSize:10
      }
      axios.get(this.URLHEAD_TA + 'YZT_SZZHZQJL',{params:params}).then(res=>{
        let json = res.data;
        this.pageCount = json.count
        this.tableData = json.Data.map((o,i)=>{
          return {
            index:i+1,
            outletPosition:o.zhdd === ''?'暂无信息':o.zhdd,
            outletType:o.zqlxName === ''?'暂无信息':o.zqlxName ,
            outletTime:o.BjsjTime === ''?'暂无信息':o.BjsjTime,
            outletTeam:o.short_name === undefined?'暂无信息':o.short_name
          }
        })
        this.loading.table = false
      })
    }
  },
  created() {
    this.typeList = ['火灾扑救','抢险救援','社会救助','其他出动']
    axios.get(this.URLHEAD_TA +'YZT_ZDLB').then(res=>{
      let json = res.data;
      this.teamList = json.Data.map(o=>{
        return o.DicKey
      })
    })
  },
  mounted() {
    this.renderChart_OutletToday();
    this.renderChart_AcceptToday();
    this.renderChart_OutletWeekly();
    this.renderTable(0)
  }
};
</script>

<style lang="" scoped>
.chart {
  height: 350px;
}
.toolbar .item{
  min-width: 300px;
  display: flex;
  flex-flow: row nowrap;
  align-items:center;
}
.toolbar .text{
  min-width: 100px;
  flex-grow: 0;
}
</style>